<template>
    <div class="activity">
        <vue3-seamless-scroll :list="list" class="scroll">
            <div class="item" v-for="(item, index) in list" :key="index">
                <span>{{ item.message }}</span>
                <span>{{ item.time }}</span>
            </div>
        </vue3-seamless-scroll>
    </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
export default defineComponent({
    name: "App",
    components: {
        Vue3SeamlessScroll,
    },
    setup() {
        const data = [];
        for (let i = 0; i < 100; i++) {
            data.push({
                message: "7月31日,全线20座车站封顶",
                time: "2022-05-01",
            });
        }
        const list = ref(data);
        return { list };
    },
});
</script>

<style scoped>
.activity {
    color: #fff;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: all;
}

.activity .scroll {
    height: 200px;
    margin: 10px;
    overflow: hidden;
}

.item {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    padding-right: 60px;
}

.item > span:first-child {
    color: #5dcad0;
}

.item > span:last-child {
    color: #667eb8;
    font-weight: bold;
}
</style>
